<template>
  <div>
    <Modal
      v-model="modals"
      width="800"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Form ref="formValidate" :model="formValidate" :label-width="110" :rules="ruleValidate" @submit.native.prevent>
        <Row type="flex" :gutter="24">
			<Col v-bind="grid">
	            <FormItem label="日期" prop="sche_time">
	              <DatePicker
	                class="form-sty"
	                type="date"
	                :value="formValidate.sche_time"
	                placeholder="请选择日期"
	                style="width: 100%"
	                format="yyyy-MM-dd"
	                @on-change="formValidate.sche_time = $event"
	              ></DatePicker>
	            </FormItem>
	        </Col>
			<Col v-bind="grid">
	            <FormItem label="科室" prop="ks_id">
	              <Select v-model="formValidate.ks_id" placeholder="请选择" element-id="ks_id" clearable>
	              	<Option v-for="(item, j) in departs" :value="item.value" :key="j">{{ item.label }} </Option>
	              </Select>
	            </FormItem>
	        </Col>
			<Col v-bind="grid">
	            <FormItem label="类型" prop="type">
	              <RadioGroup v-model="formValidate.type">
	                <Radio :label="0">挂号</Radio>
	                <Radio :label="1">视觉训练</Radio>
	              </RadioGroup>
	            </FormItem>
	        </Col>
			
			<Col v-bind="grid">
			    <FormItem label="排班方式" prop="sche_type">
			      <Select v-model="formValidate.sche_type" placeholder="请选择" element-id="sche_type" clearable>
			      	<Option v-for="(item, j) in types" :value="item.value" :key="j">{{ item.label }} </Option>
			      </Select>
			    </FormItem>
			</Col>
			<Col v-bind="grid">
	            <FormItem label="医生" prop="doc_id">
	              <Select v-model="formValidate.doc_id" placeholder="请选择" element-id="doc_id" clearable>
	              	<Option v-for="(item, j) in docs" :value="item.value" :key="j">{{ item.label }} </Option>
	              </Select>
	            </FormItem>
	        </Col>
			<Col v-bind="grid">
	            <FormItem label="默认诊室" prop="room_id">
	              <Select v-model="formValidate.room_id" placeholder="请选择" element-id="room_id" clearable>
	              	<Option v-for="(item, j) in rooms" :value="item.value" :key="j">{{ item.label }} </Option>
	              </Select>
	            </FormItem>
	        </Col>
			<Col v-bind="grid">
	            <FormItem label="挂号费" prop="amount_id">
	              <Select v-model="formValidate.amount_id" placeholder="请选择" element-id="amount_id" clearable>
	              	<Option v-for="(item, j) in amounts" :value="item.value" :key="j">{{ item.label }} </Option>
	              </Select>
	            </FormItem>
	        </Col>
			<Col v-bind="grid">
	            <FormItem label="候诊地点" prop="address">
	              <Input v-model="formValidate.address" placeholder="请输入候诊地点"></Input>
	            </FormItem>
	        </Col>
        </Row>
		<Row>
			<Col>
				<div class="time_bg">
					<div class="top">
						<div class="type">值班类型</div>
						<div class="start">开诊时间</div>
						<div class="end">闭诊时间</div>
						<div class="room"><span class="red">*</span>诊室</div>
						<div class="total"><span class="red">*</span>号源总数</div>
						<div class="online"><span class="red">*</span>线上号数</div>
					</div><!--header end-->
					<div class="bottom" v-if="formValidate.am_id || !formValidate.id">
						<div class="type">
							<input type="checkbox" v-if="formValidate.am_id" disabled v-model="formValidate.am"/>
							<input type="checkbox" v-else v-model="formValidate.am"/>
							<span class="text">上午</span>
						</div>
						<div class="start">
							<DatePicker
							  class="form-sty"
							  type="time"
							  :value="formValidate.am_start"
							  placeholder="请选择日期"
							  style="width: 100%"
							  format="HH:mm"
							  @on-change="formValidate.am_start = $event"
							></DatePicker>
						</div>
						<div class="end">
							<DatePicker
							  class="form-sty"
							  type="time"
							  :value="formValidate.am_end"
							  placeholder="请选择日期"
							  style="width: 100%"
							  format="HH:mm"
							  @on-change="formValidate.am_end = $event"
							></DatePicker>
						</div>
						<div class="room">
							<Select v-model="formValidate.am_room_id" placeholder="请选择" element-id="am_room_id" clearable>
								<Option v-for="(item, j) in rooms" :value="item.value" :key="j">{{ item.label }} </Option>
							</Select>
						</div>
						<div class="total" prop="am_total">
							<Input v-model="formValidate.am_total" ></Input>
						</div>
						<div class="online">
							<Input v-model="formValidate.am_online"></Input>
						</div>
					</div><!--bottom end-->
					<div class="bottom" v-if="formValidate.pm_id || !formValidate.id">
						<div class="type">
							<input type="checkbox" v-if="formValidate.pm_id" disabled v-model="formValidate.pm"/>
							<input type="checkbox" v-else v-model="formValidate.pm"/>
							<span class="text">下午</span>
						</div>
						<div class="start">
							<DatePicker
							  class="form-sty"
							  type="time"
							  :value="formValidate.pm_start"
							  placeholder="请选择日期"
							  style="width: 100%"
							  format="HH:mm"
							  @on-change="formValidate.pm_start = $event"
							></DatePicker>
						</div>
						<div class="end">
							<DatePicker
							  class="form-sty"
							  type="time"
							  :value="formValidate.pm_end"
							  placeholder="请选择日期"
							  style="width: 100%"
							  format="HH:mm"
							  @on-change="formValidate.pm_end = $event"
							></DatePicker>
						</div>
						<div class="room">
							<Select v-model="formValidate.pm_room_id" placeholder="请选择" element-id="pm_room_id" clearable>
								<Option v-for="(item, j) in rooms" :value="item.value" :key="j">{{ item.label }} </Option>
							</Select>
						</div>
						<div class="total">
							<Input type="number" v-model="formValidate.pm_total" ></Input>
						</div>
						<div class="online">
							<Input type="number" v-model="formValidate.pm_online"></Input>
						</div>
					</div><!--bottom end-->
				</div><!--time_bg end-->
			</Col>
		</Row>
      </Form>
	  <div slot="footer">
	    <Button @click="cancel()">取消</Button>
	    <Button type="primary" @click="handleSubmit()">保存</Button>
	  </div>
    </Modal>
    <Modal v-model="modal12" scrollable width="600" title="图标选择" footer-hide>
      <Input
        v-model="iconVal"
        placeholder="输入关键词搜索,注意全是英文"
        clearable
        style="width: 300px"
        @on-change="upIcon(iconVal)"
        ref="search"
      />
      <div class="trees-coadd">
        <div class="scollhide">
          <div class="iconlist">
            <ul class="list-inline">
              <li class="icons-item" v-for="(item, i) in list" :key="i" :title="item.type">
                <Icon :type="item.type" @click="iconChange(item.type)" class="ivu-icon" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { saveApi,ListDicApi} from '@/api/schedule';
import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';
export default {
  name: 'menusFrom',
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
		sche_time: [{ required: true, message: '请选择日期', trigger: 'blur' }],
		ks_id: [{ required: true, message: '请选择科室', trigger: 'change', type: 'number'}],
		sche_type: [{ required: true, message: '请选择排班方式', trigger: 'change', type: 'number' }],
		doc_id: [{ required: true, message: '请选择医生',trigger: 'change', type: 'number'}],
		room_id: [{ required: true, message: '请选择诊室', trigger: 'change', type: 'number'}],
		amount_id: [{ required: true, message: '请选择挂号费', trigger: 'change', type: 'number' }],
		am_room_id: [{ required: true, message: '请选择诊室',trigger: 'change', type: 'number'}],
		am_total: [{ required: true, message: '请输入号源总数', trigger: 'blur' }],
		pm_online: [{ required: true, message: '请输入线上号数', trigger: 'blur' }],
		pm_room_id: [{ required: true, message: '请选择诊室',trigger: 'change', type: 'number'}],
		pm_total: [{ required: true, message: '请输入号源总数', trigger: 'blur' }],
		pm_online: [{ required: true, message: '请输入线上号数', trigger: 'blur' }],
      },
      departs: [],
      types: [],
      rooms: [],
	  docs:[],
      amounts: [],
      valids: false,
      list: icon,
      authType: true,
      search: icon,
	  header: {},
      fileUrl: '/adminapi/file/upload_file/1',
	  files:[]
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    'formValidate.data': function (n) {},
  },
  computed: {
	  
  },
  methods: {
    init() {
      this.searchRule = '';
      this.arrs = [];
    },
	// 上传成功
	handleSuccess(res, file) {
	  if (res.status === 200) {
		this.files.push(res.data.data);
	    this.$Message.success(res.msg);
	  } else {
	    this.$Message.error(res.msg);
	  }
	},
	handleFormatError(file) {
		
	},
	handleMaxSize(file) {
	  this.$Message.warning('请上传文件30M以内的文件');
	},
	delFile(index){
		this.files.splice(index,1);
	},
	// 上传头部token
	getToken() {
	  this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
	  console.info(this.header);
	},
    handleCreate1(val) {
      this.headerOptionsList.push({
        value: val,
        label: val,
      });
    },
    // 获取客户数据
    getAddFrom() {
		let that = this;
        ListDicApi()
        .then(async (res) => {
			that.departs = res.data['departs'];
			that.types = res.data['types'];
			that.rooms = res.data['rooms'];
			that.docs = res.data['docs'];
			that.amounts = res.data['amounts'];
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
	cancel(){
		this.modals = false;
	},
    // 提交
    handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.valids = true;
		  console.info(this.formValidate)
		  if(this.formValidate.am && (this.formValidate.am_room_id == 0 || !this.formValidate.am_room_id)){
			  return this.$Message.error('请选择上午诊室');
		  }
		  if(this.formValidate.pm && (this.formValidate.pm_room_id == 0 || !this.formValidate.pm_room_id)){
			  return this.$Message.error('请选择下午诊室');
		  }
		  if(this.formValidate.am && this.formValidate.am_total <= 0){
			  return this.$Message.error('号源总数不能为0！');
		  }
		  if(this.formValidate.pm && this.formValidate.pm_total <= 0){
			  return this.$Message.error('号源总数不能为0！');
		  }
          saveApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
			  this.files = [];
              this.modals = false;
              this.$emit('getList');
              this.getAddFrom();
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
			if (!this.formValidate.sche_time) return this.$Message.error('请选择日期！');
			if (!this.formValidate.ks_id) return this.$Message.error('请选择科室！');
			if (!this.formValidate.doc_id) return this.$Message.error('请选择医生！');
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.authType = true;
      this.$refs['formValidate'].resetFields();
      this.$emit('clearFrom');
    },
  },
  created() {
    this.list = this.search;
    this.getToken();
    this.getAddFrom();
  },
};
</script>

<style scoped>
.trees-coadd {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
}
.scollhide {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-left: 18px;
  padding: 10px 0 10px 0;
  box-sizing: border-box;
}
.content {
  font-size: 12px;
}

.time {
  font-size: 12px;
  color: #2d8cf0;
}

.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 53px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 50px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;
}
.icons-item .ivu-icon {
  font-size: 16px;
}
.search-rule {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  max-height: 700px;
  overflow: scroll;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.rule::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.rule::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.rule::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #555;
}
.rule-list {
  background-color: #f2f2f2;
  width: 32%;
  margin: 5px;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  cursor: pointer;
  transition: all 0.1s;
}
.rule-list:hover {
  background-color: #c5d1dd;
}
.rule-list div {
  white-space: nowrap;
}
.select-rule {
  background-color: #c5d1dd;
}
.sec{
	width: 100px;
}
.add {
  display: flex;
  align-items: center;
}
.df {
  display: flex;
  justify-content: center;
}

.file{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.file:hover{
	background-color: #edf7fe;
}
.close-bg{
	display: inline-block;
	width: 35px;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 15px;;
}

.close-bg:hover{
	cursor: pointer;
}

.close {
	display: inline-block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(45deg);
}

.close::after {
	content: '';
	display: block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(-90deg);
}

.time_bg{
	/* height:100px; */
	border: 1px solid #dedede;
	display: flex;
	flex-direction: column;
}

.time_bg .top{
	display: flex;
	flex-direction: row;
	color: black;
	font-size: 14px;
	height:40px;
	width: 100%;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}
.time_bg .top .type{
	width: 14%;
	text-align: center;
}
.time_bg .top .start{
	width: 18%;
	text-align: center;
}
.time_bg .top .end{
	width: 18%;
	text-align: center;
}
.time_bg .top .room{
	width: 18%;
	text-align: center;
}
.time_bg .top .red{
	color: red;
	font-size: 14px;
}
.time_bg .top .total{
	width: 18%;
	text-align: center;
}
.time_bg .top .online{
	width: 14%;
	text-align: center;
}
.time_bg .bottom{
	display: flex;
	flex-direction: row;
	color: black;
	font-size: 14px;
	height:40px;
	width: 100%;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	background-color: #f1f1f1;
}
.time_bg .bottom .type{
	width: 14%;
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.time_bg .bottom .type .check{
	
}
.time_bg .bottom .type .text{
	margin-left: 10px;
}
.time_bg .bottom .start{
	width: 18%;
	text-align: center;
	padding: 0px 10px;
}
.time_bg .bottom .start .form-sty{
	background-color: white;
}
.time_bg .bottom .end{
	width: 18%;
	text-align: center;
	padding: 0px 10px;
}
.time_bg .bottom .room{
	width: 18%;
	text-align: center;
	padding: 0px 10px;
}
.time_bg .bottom .total{
	width: 18%;
	text-align: center;
	padding: 0px 10px;
}
.time_bg .bottom .online{
	width: 14%;
	text-align: center;
	padding: 0px 10px;
}
</style>
